Media Queries

1. Evolucija weba

Kako su se web stranice nekada prikazivale na mobilnim uređajima, a što se koristi danas?

Nekada su se koristile odvojene verzije web stranica, na primjer:

• www.index.hr – za računala
• m.index.hr – za mobilne uređaje

Danas se izbacuje korištenje više verzija web stranica te se koristi jedna responzivna web stranica koja se automatski prilagođava uređaju koji ju učitava.

Razlika između fiksnog i fluidnog rasporeda

Fiksni raspored (Fixed layout)

• Elementi imaju fiksne širine (npr. u pikselima)
• Stranica se ne prilagođava različitim veličinama ekrana
• Nije pogodna za mobilne uređaje

Fluidni raspored (Fluid layout)

• Elementi imaju fluidne širine (npr. u postotcima)
• Elementi su uvijek u istom međusobnom odnosu
• Pri smanjenju ekrana elementi se proporcionalno smanjuju

Koji pristup pruža najveću kontrolu izgleda stranice?

Responsive Web Design, koji je kombinacija fluidnog rasporeda i CSS media queries. Ovaj pristup omogućuje najveću kontrolu izgleda i ponašanja stranice na različitim uređajima.

2. Tehnička postavka (Viewport)

Što je viewport i zašto je manji na mobitelu nego na računalu?

Viewport je vidljivo područje web stranice na uređaju. Manji je na mobilnim telefonima jer imaju manju fizičku veličinu zaslona u odnosu na računala.

HTML tag za prilagodbu širini uređaja

<meta name="viewport" content="width=device-width, initial-scale=1.0">
        

Što kontrolira initial-scale=1.0?

Određuje početni faktor uvećanja ili smanjenja prikaza web stranice, odnosno prikaz stranice u stvarnoj veličini (100%) bez zumiranja.

3. Breakpointi (Točke prekida)

4. Mjerne jedinice

Fiksne mjerne jedinice u CSS-u

• px (pikseli)
• cm (centimetri)
• mm (milimetri)
• in (inči)

Varijabilne mjerne jedinice za responzivnost

• % (postotci)
• em
• rem
• vw, vh

Kada koristiti fiksne, a kada varijabilne mjere?

Fiksne mjere koristimo kada je potrebna precizna kontrola izgleda elemenata.

Varijabilne mjere koristimo za responzivnost i prilagodbu različitim veličinama ekrana.